<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li><a href="index.html">检测人脸</a></li>
      <li><a href="compareCode.html">相似度比较</a></li>
      <li class="active"><a href="centerFace.html">检测最中心人脸</a></li>
      <li><a href="addFeature.html">添加特征码</a></li>
      <li><a href="../jQuery/index.html" target="_blank">切换版本</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="div-upload">
      <div class="div-btn">
        <button type="button" class="btn btn-default btn-blue">点击上传</button>
        <button type="button" class="btn btn-default btn-blue submit">点击检测</button>
      </div>
      <div class="tips">
        <p>调用的接口：detectCenterFace</p>
        <p>接口参数：imgBlob</p>
        <p>参数解析：图片的二进制流文件</p>
        <p>举例：client.detectCenterFace(imgBlob, function (data) {})</p>
      </div>
      <div class="tips informain none">
        <p>返回的数据：</p>
        <p>angle: <span class="angle"></span></p>
        <p>ei: <span class="ei"></span></p>
        <p>mouth: <span class="mouth"></span></p>
        <p>nose: <span class="nose"></span></p>
        <p>pos: <span class="pos"></span></p>
      </div>
      <input type="file" onchange="previewImage(this)" id="photoimg" class="btn-file" />
      <div class="preview" id="preview"><img src="" alt="" /></div>
    </div>
    <!-- 提示语 -->
    <div class="box">
      <div class="msg">提示成功</div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="js/thrift.js"></script>
  <script src="js/FaceApi.js"></script>
  <script src="js/FaceApi_types.js"></script>
  <script src="js/common.js"></script>
  <script src="js/preview.js"></script>
  <script>
    // 提交对比
    $('.submit').click(function () {
      var imgViewWid = $('.preview img').width();
      var imgViewHei = $('.preview img').height();

      // 调用 detectFace 接口方法
      client.detectCenterFace(imgBlob, function (data) {
        $('.informain').show();
        $('.angle').text(JSON.stringify(data.angle));
        $('.ei').text(JSON.stringify(data.ei))
        $('.mouth').text(JSON.stringify(data.mouth))
        $('.nose').text(JSON.stringify(data.nose))
        $('.pos').text(JSON.stringify(data.pos));

        var local = data.pos;
        // 比较展示的图片宽度/高度和实际的图片宽度/高度
        if (imgNatWid != imgViewWid && imgNatHei != imgViewHei) {
          var preceWid = imgViewWid / imgNatWid;
          var preceHei = imgViewHei / imgNatHei;
          var html = '<div class="drawDiv" style="left:' + local.left * preceWid + 'px;top:' + local.top * preceHei + 'px;width:' + local.width * preceWid + 'px;height:' + local.height * preceHei + 'px;"></div>'
        } else {
          var html = '<div class="drawDiv" style="left:' + local.left + 'px;top:' + local.top + 'px;width:' + local.width + 'px;height:' + local.height + 'px;"></div>'
        }
        $('.preview').append(html);
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text('检测成功');
      }).fail(function (jqXHR, status, error) {
        $('.box').show().delay(30000).fadeOut();
        $('.box').find('.msg').text(status + ":" + error);
      })
    })
  </script>
</body>

</html>